import 'package:cached_network_image/cached_network_image.dart';
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ball_lion/module/record/items/data_left_list.dart';
import 'package:ball_lion/widgets/loading/loading_widget.dart';
import 'package:visibility_detector/visibility_detector.dart';
import 'package:ball_lion/module/record/team_logic.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/routes/routes.dart';
import 'package:ball_lion/utils/utils.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';

class TeamPage extends StatefulWidget {
  const TeamPage(this.leagueId, {super.key, required this.tag});

  final int leagueId;
  final String tag;

  @override
  State<TeamPage> createState() => _TeamPageState();
}

class _TeamPageState extends State<TeamPage>
    with AutomaticKeepAliveClientMixin {
  late TeamLogic logic;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return GetBuilder<TeamLogic>(
      tag: widget.tag,
      initState: (state) {
        logic =
            Get.put(TeamLogic(widget.leagueId, widget.tag), tag: widget.tag);
      },
      builder: (_) {
        return VisibilityDetector(
          key: Key(widget.tag),
          onVisibilityChanged: (VisibilityInfo info) {
            logic.visible = !info.visibleBounds.isEmpty;
          },
          child: LoadingWidget<bool>(
              isLoading: logic.struct == null,
              data: logic.struct?.length == 0,
              child: () => Row(
                    children: [
                      DataLeftList(logic.struct!.map((e) => e.value!).toList(),
                          logic.structIndex, ((p0) {
                        Utils.onEvent('zqsjpd_qdb',
                            params: {'zqsjpd_qdb': logic.struct![p0].value});
                        logic.structIndex = p0;
                        logic.getData();
                      })),
                      right(),
                    ],
                  )),
        );
      },
    );
  }

  Widget right() {
    // return EasyRefresh.bui
    return Expanded(
        child: Container(
      color: Colours.white,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        child: logic.header == null
            ? Container()
            : Column(
                children: [
                  Container(
                    height: 38,
                    color: Colours.white,
                    child: Row(
                      children: [
                        const SizedBox(
                            width: 34,
                            child: QsText('球队',
                                textAlign: TextAlign.center,
                                color: Colours.N8,
                                fontSize: 13)),
                        const Spacer(),
                        SizedBox(
                          width: 50,
                          child: QsText(logic.header?.last ?? '',
                              textAlign: TextAlign.center,
                              color: Colours.N8,
                              fontSize: 13),
                        )
                      ],
                    ),
                  ),
                  Expanded(
                      child: EasyRefresh(
                    onRefresh: () async {
                      logic.getData(needLoading: false);
                    },
                    controller: logic.refreshController,
                    child: MediaQuery.removePadding(
                      context: context,
                      removeTop: true,
                      child: ListView.separated(
                        shrinkWrap: true,
                        //physics: const NeverScrollableScrollPhysics(),
                        itemCount: logic.teamAll?.length ?? 0,
                        separatorBuilder: (context, index) => const Divider(
                            color: Colours.N3,
                            height: 0.5,
                            indent: 2,
                            endIndent: 2),
                        itemBuilder: (context, index) => teamWidget(index),
                      ),
                    ),
                  ))
                ],
              ),
      ),
    ));
  }

  Widget teamWidget(int index) {
    final data = logic.teamAll![index];
    return GestureDetector(
      onTap: () {
        Utils.onEvent('data_match_team_view',
            params: {'team_id': data.qxbTeamId});
        Get.toNamed(
            logic.channel.recordType == 0
                ? Routes.zqTeamDetail
                : Routes.lqTeamDetail,
            arguments: data.qxbTeamId);
      },
      child: Container(
        height: 50,
        padding: const EdgeInsets.symmetric(vertical: 5),
        child: Row(children: [
          SizedBox(
              width: 34,
              child: QsText(
                data.index ?? '',
                color: Colours.N9,
                textAlign: TextAlign.center,
                fontSize: 13,
              )),
          CachedNetworkImage(
            height: 24,
            width: 24,
            fit: BoxFit.fitWidth,
            imageUrl: data.teamLogo!,
            placeholder: (context, url) => Styles.placeholderIcon(),
          ),
          const SizedBox(width: 8),
          Expanded(
            child: QsText(
              data.teamName ?? '',
              color: Colours.N9,
            ),
          ),
          SizedBox(
            width: 50,
            child: QsText(
              data.values?.last ?? "",
              textAlign: TextAlign.center,
              color: Colours.N9,
              fontSize: 13,
            ),
          ),
        ]),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
